<template>
  <div>
    <div style="width: 600px;margin:0 auto;box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3);">
      <div style="display: flex;flex-direction: column">
        <div class="di">
          <span>用户账号</span>
          <el-input v-model="username" aria-placeholder="请输入用户名" style="width: 150px">{{ username }}</el-input>
        </div>
        <div class="di">
          <span>用户密码</span>
          <el-input v-model="password" type="password" aria-placeholder="请输入密码" style="width: 150px">{{ password }}
          </el-input>
        </div>
        <div>
          <el-checkbox-group v-model="checkList" v-for="(item,i) in powerList" :key="i">
            <el-checkbox v-bind:label=item.powerId>{{ item.powerName }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <el-form label-width="80px">
          <el-form-item label="用户头像">
            <el-upload
                class="avatar-uploader"
                name="imgPath"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img style="width: 100px;height: 100px" v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="di">
          <el-button type="success" @click="userRegister">注册</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      uploadUrl: "userApi/user/uploadImg",
      password: '',
      username: '',
      checkList: [],
      powerList: [],
      imgPath: '',
      imageUrl: ''
    }
  }, mounted() {
    this.showPower()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      //上传成功
      if (res != "no") {
        console.log(res)
        this.imgPath = res
        this.$message.success('文件上传成功');
      } else {
        this.$message.success("文件上传失败");
      }
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    userRegister() {
      console.log("")
      let url = "userApi/user/registerUser/" + this.username + "/" + this.password + "/" + this.checkList + "/" + this.imgPath
      this.axios.get(url).then(
          result => {
            console.log(result.data)
            if (result.data == "ok") {
              this.$router.push("Login")
            }
          }
      )
    },
    showPower() {
      let url = "userApi/user/getPower"
      this.axios.get(url).then(
          result => {
            console.log(result.data)
            this.powerList = result.data
          }
      )
    }
  }
}
</script>

<style scoped>
span {
  margin: 20px;
}

.di {
  margin: 20px;
}
</style>